<template>
	<view>
		<view class="top">
			<image class="topImage" src="../static/secondTopImage.png"></image>
			<image @click="clickBack" class="backButton" src="../static/backButton.png"></image>
		</view>
		<scroll-view style="position: absolute;top: 0;bottom: 180rpx;" scroll-y="true">
			<view class="body">
				<view class="background" style="position: sticky;top: 200rpx;">
					<view class="title">
						<view class="text">{{data.dmo.store_name}}</view>
						<view class="image-box ">
							<image @click="click_funButton(1)" class="image" src="../static/dianhua.png" mode=""></image>
							<image @click="click_funButton(2)" class="image" src="../static/kefu.png" mode=""></image>
							<!-- <image @click="click_funButton(3)" class="image" src="../static/fenxiang.png" mode=""></image> -->
							<div class="share-box image">
								<button open-type="share" class="appointment-share"></button>
							</div>
						</view>
					</view>
					<view class="containerBox">
						<view class="topBox">
							<view class="content" v-for="item in containerData">{{item}}</view>
						</view>
						<view class="textBox">
							<view class="left">营业中</view>
							<view class="mid">周一至周日</view>
							<view class="right">24小时营业</view>
						</view>
						<view class="addressBox">
							<image class="image" src="../static/Group 1675.png"></image>
							<view class="text">{{data.dmo.province}}{{data.dmo.city}}{{data.dmo.district}}{{data.dmo.address}}｜7.6km
							</view>
							<view class="button" @click="openLocation()">
								<image class="icon" src="../static/daohang.png"></image>
								导航
							</view>
						</view>
						<view class="line"></view>
					</view>
					<view class="cardBox">
						<view class="vip flex justify-between align-center">
							<view class="">
								<view class="title">升级会员</view>
								<view class="text">立享单单减5元优惠权益</view>
							</view>
							<view class="button" @click="click_upgrade">
								<view class="button-text">去升级</view>
							</view>
						</view>
						<view class="chose">
							<view class="chouseButton">
								<view class="buttonBox" @click="clcikChouseButton(item,index)" v-for="(item,index) in data.tabList">
									<view class="text" :class="{trueText:index==chouseButtonId}">{{item.show_name}}</view>
									<view class="trueline" v-if="chouseButtonId==index"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cardBox2">
					<view class="card" @click="toOpen(item)" v-for="item in data.deviceList">
						<view class="topText">{{item.binding_name}}</view>
						<image class="image" :src="item.furniture_image"></image>
						<view class="button">预约/开台</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="navigation">
			<view class="left">
				<view class="button">
					<image @click="click_navigationButton('会员充值')" class="image" src="../static/chongzhi.png"></image>
					<view class="text">会员充值</view>
				</view>
				<view class="button" @click="couponTo">
					<image class="image" src="../static/kaquan.png"></image>
					<view class="text">卡劵兑换</view>
				</view>
			</view>
			<view class="right" @click="click_code">
				<view class="text">扫码开台</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance()
	onShareAppMessage(() => { //分享
		return {
			title: '车辆配货',
			path: `/pagesStore/detail/detail?store_id=${data.options.store_id}`
			// path: `/pages_sharing_page/index?BillID=${this.obj.BillID}&TableName=${this.obj.TableName}`,
		}
	})
	let data = reactive({
		isShare: null,
		options: null,
		dmo: {},
		tabList: [],
		show_id: "",
		deviceList: []
	})
	const toOpen = (item) => {
		console.log('open')
		let obj = {
			...data.dmo,
			...item
		}
		uni.navigateTo({
			url: `../open/open?item=${encodeURIComponent(JSON.stringify(obj))}`
		});
	}
	const containerData = ref(["正常营业", "24小时营业", "休息区", "Wi-Fi"])
	const navigationButtonData = () => {}
	//电话(id:1) 客服(id:2) 分享(id:3) 点击事件
	const click_funButton = (id) => {
		switch (id) {
			case 1:
				uni.makePhoneCall({
					phoneNumber: data.dmo.boss_phone,
					success() {

					}
				})
				break;
			case 2:

				break;
			case 3:
				break;
			default:
				break;
		}
		console.log(id)
	}
	const openLocation = () => {
		console.log('openLocation', data.dmo)
		uni.openLocation({
			latitude: parseInt(data.dmo.latitude),
			longitude: parseInt(data.dmo.longitude),
			scale: 18,
			name: "大名",
			address: '河北省邯郸市大名县大名府西路',
			success: function() {
				console.log('success');
			},
			fail: function(err) {
				console.log('err', err);
			}
		})
	}
	//返回点击事件
	const clickBack = () => {
		console.log("back")
		uni.navigateBack({
			delta: 1
		})

	}
	//会员升级按钮
	const click_upgrade = () => {

	}
	// const chouseData = ref(['球桌', '棋牌'])
	//选择按钮触发状态id
	const chouseButtonId = ref(0)
	//类型选择按钮点击事件
	const clcikChouseButton = (item, index) => {
		data.show_id = item.show_id
		chouseButtonId.value = index
		console.log(data.show_id)
	}
	const cardData = ref([{
			title: '椅子',
			image: '../../static/store/yizi.png',
			buttonText: '预约',
			id: 0
		},
		{
			title: '电视',
			image: '../../static/store/dianshi.png',
			buttonText: '预约/开台',
			id: 1
		},
		{
			title: '冰箱',
			image: '../../static/store/bingxiang.png',
			buttonText: '预约',
			id: 2
		},
		{
			title: '空调',
			image: '../../static/store/空调.png',
			buttonText: '预约/开台',
			id: 3
		}
	])

	const click_navigationButton = (item) => {
		console.log(item)
		uni.navigateTo({
			url: `../recharge/recharge`
		});
	}
	//扫码开台点击事件
	const click_code = () => {

	}

	function couponTo() {
		uni.navigateTo({
			url: "/pagesMy/coupon/index"
		})
	}

	function getIfon() {
		proxy.$https('/store_details_api', {
			store_id: data.options.store_id
		}).then(res => {
			console.log(res.atlas[0], 'res')
			data.dmo = res.atlas[0]
			data.tabList = res.show_image
			data.show_id = res.show_image[0].show_id
			console.log(res.show_image[0], 'res.show_image[0]')
			getBinding()
		})
	}

	function getBinding() {
		proxy.$https('/get_store_device_message_api', {
			store_id: data.options.store_id,
			show_id: data.show_id
		}).then(res => {
			data.deviceList = res;

		})
	}

	//获取一级页面携带参数
	onLoad((item) => {
		data.options = item
		getIfon()

	})
</script>

<style lang="scss" scoped>
	.share-box {
		height: 36rpx;
		width: 36rpx;

		.appointment-share {
			height: 36rpx;
			width: 36rpx;
			// background-position: right top;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 36rpx 36rpx;
			background-image: url("../static/fenxiang.png");
			// background-color: red;

		}

		button {
			font-size: 34rpx;
			background: #fff;
		}

		button::after {
			border: none;
		}

	}

	.cardBox2 {
		display: grid;
		grid-template-columns: 352rpx 332rpx;
		height: auto;
		margin: 40rpx;


		.card {
			margin-top: 20rpx;
			width: 332rpx;
			height: 316rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.topText {
				font-weight: bold;
				font-size: 26rpx;
				color: #333333;
				line-height: 30rpx;
				margin-left: 24rpx;
				margin-top: 24rpx;
			}

			.image {
				margin-top: 16rpx;
				margin-left: 82rpx;
				height: 156rpx;
				width: 156rpx;
			}

			.button {
				width: 140rpx;
				height: 44rpx;
				background: #F48A2A;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				margin-top: 32rpx;
				margin-left: 176rpx;
				text-align: center;
			}
		}
	}


	.topImage {
		position: absolute;
		z-index: 10;
		width: 750rpx;
		height: 400rpx;
	}

	.backButton {
		position: absolute;
		z-index: 99;
		top: 110rpx;
		left: 32rpx;
		width: 40rpx;
		height: 40rpx;

	}

	.body {
		position: absolute;
		top: 340rpx;

		.background {
			// width: 100vh;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			z-index: 10;
			padding: 0 32rpx;
		}

		.cardBox {
			// margin: 64rpx 32rpx 0 32rpx;
			margin-top: 64rpx;
			// margin-left: 32rpx;
			background-image: url('../static/升级会员背景.png');
			background-size: cover;
			background-position: center;
			height: 160rpx;
			width: 686rpx;

			.vip {
				padding: 24rpx 16rpx 22rpx 20rpx;

				.title {

					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: bold;
					font-size: 48rpx;
					color: #854000;

					letter-spacing: 3px;
				}

				.text {

					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #854000;
					margin-top: 12rpx;
					letter-spacing: 1px;
				}

				.button {

					width: 140rpx;
					height: 50rpx;
					background: linear-gradient(180deg, #AB5200 0%, #854000 100%);
					box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(255, 255, 255, 0.25);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.5);

					.button-text {
						width: 140rpx;
						height: 42rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 42rpx;
						text-align: center;
					}
				}
			}

			.chose {
				background-color: #fff;
				// margin-bottom: 32rpx;
				padding-top: 32rpx;

				.chouseButton {
					// height: 52rpx;
					display: flex;

					.buttonBox {
						margin-right: 80rpx;

						.text {
							width: 56rpx;
							height: 40rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 33rpx;
						}

						.trueText {
							width: 56rpx;
							height: 40rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 33rpx;
						}

						.trueline {
							width: 56rpx;
							height: 8rpx;
							background: linear-gradient(90deg, rgba(16, 199, 110, 0.6) 0%, rgba(16, 199, 110, 0.1) 100%);
							box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(16, 199, 110, 0.1);
							border-radius: 30rpx 30rpx 30rpx 30rpx;
						}
					}

				}
			}
		}

		.title {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.text {
				width: 340rpx;
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				margin-top: 32rpx;
				// margin-left: 32rpx;
			}

			.image-box {
				display: flex;
				align-items: center;

				.image {
					height: 36rpx;
					width: 36rpx;
					margin-left: 20rpx;
					// margin-top: 32rpx;
				}
			}
		}

		.containerBox {
			.topBox {
				display: flex;

				.content {
					// width: 120rpx;
					padding: 6rpx 16rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 1rpx solid #10C76E;
					font-family: PingFang SC, PingFang SC;
					font-size: 22rpx;
					color: #10C76E;
					text-align: center;
					// margin-left: 32rpx;
					margin-top: 20rpx;

					&:not(:first-child) {
						margin-left: 20rpx;
					}
				}
			}

		}

		.line {
			width: 686rpx;
			height: 0rpx;
			border: 1rpx solid #D9D9D9;
			position: absolute;
			left: 32rpx;
			top: 272rpx;
			// margin-top: 24rpx;
			// margin-left: 32rpx;
		}

		.addressBox {
			display: flex;
			// margin-left: 32rpx;

			.image {
				width: 24rpx;
				height: 26rpx;
				margin-top: 30rpx;
			}

			.text {
				margin-top: 26rpx;
				width: 482rpx;
				height: 34rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}

			.button {
				width: 112rpx;
				height: 44rpx;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				border: 1rpx solid #1B69FD;
				right: 32rpx;
				top: 208rpx;
				font-weight: bold;
				font-size: 22rpx;
				color: #1B69FD;
				line-height: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 64rpx;
				margin-top: 15rpx;

				.icon {
					height: 24rpx;
					width: 24rpx;
					margin-right: 2rpx;
				}
			}
		}


		.textBox {
			// margin-left: 32rpx;
			margin-top: 20rpx;
			display: flex;

			.left {
				width: 72rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #FF6533;
				line-height: 28rpx;
			}

			.mid,
			.right {
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: left;
				margin-left: 12rpx;
			}
		}
	}

	.navigation {
		position: relative;
		position: absolute;
		bottom: 0;
		z-index: 99;
		width: 750rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		display: flex;

		.left {
			display: flex;
			margin-left: 54rpx;
			margin-top: 24rpx;

			.button {
				width: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 38rpx;

				.image {
					height: 46rpx;
					width: 46rpx;
				}

				.text {
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					line-height: 23rpx;
				}
			}
		}

		.right {
			position: absolute;
			top: 36rpx;
			right: 32rpx;
			width: 160rpx;
			height: 60rpx;
			background: #10C76E;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(255, 255, 255, 0.25);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid rgba(16, 199, 110, 0.3);

			.text {
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
</style>